import React, { useEffect, useState } from 'react';
import { connect, history } from 'umi';
import { Layout, Menu } from 'antd';
import { CalendarOutlined, UserOutlined } from '@ant-design/icons';

import styles from './index.less';


const { Content, Sider } = Layout;

interface InformationProps {}

const Information: React.FC<InformationProps> = (props) => {
  const [key, setKey] = useState<string>('user');

  // 页面路由跳转
  const jump = (k: string) => {
    setKey(k);
    history.push(`/information/${k}`);
  };

  useEffect(() => {
    const {pathname} = history.location;
    if (pathname === '/information') {
      setKey('user');
    } else {
      setKey(pathname.replace('/information/', ''));
    }
  });

  return (
    <Layout style={{ background: '#fff', height: 'calc(100vh - 84px)', overflow: 'hidden' }}>
      <Sider width={146}>
        <Menu
          mode='inline'
          selectedKeys={[key]}
          style={{ height: '100%' }}
          onClick={(e) => jump(e.key)}
        >
          <Menu.Item key='user'>
            <UserOutlined style={{ marginRight: '5px' }} />
            用户管理
          </Menu.Item>
          {/*TODO 角色管理*/}
          {/*<Menu.Item key="role">*/}
          {/*  <TeamOutlined style={{ marginRight: '5px' }} />*/}
          {/*  角色管理*/}
          {/*</Menu.Item>*/}
          {/*TODO 组织管理*/}
          {/* <Menu.Item key="organize">*/}
          {/*  <ClusterOutlined style={{ marginRight: '5px' }} />*/}
          {/*  组织管理*/}
          {/*</Menu.Item>*/}
          {/*TODO 临时权限*/}
          {/*<Menu.Item key="authority">*/}
          {/*  <FieldTimeOutlined style={{ marginRight: '5px' }} />*/}
          {/*  临时权限*/}
          {/*</Menu.Item>*/}
          {/*TODO 项目管理*/}
          {/*<Menu.Item key="project">*/}
          {/*  <CalendarOutlined style={{ marginRight: '5px' }} />*/}
          {/*  项目管理*/}
          {/*</Menu.Item>*/}
          <Menu.Item key='role'>
            <CalendarOutlined style={{ marginRight: '5px' }} />
            角色管理
          </Menu.Item>
        </Menu>
      </Sider>
      <Content className={styles.informationWrap}>{props.children}</Content>
    </Layout>
  );
};

export default connect(() => ({}))(Information);
